<template>
  <view class="all1">
    <view class="input">
      <view style="display: flex; align-items: center;width:100%">
<!--        <view class="">搜索内容：</view>-->
<!--        <u&#45;&#45;input placeholder="请输入内容" border="surround" v-model="value"></u&#45;&#45;input>-->
<!--        <u-button type="primary" icon="search" text="搜索" style="width: 200rpx;" @click="onQuery"></u-button>-->
        <u-search placeholder="请输入搜索内容" v-model="value" @change="changkeyword" @search="onQuery"
                  :showAction="false" bgColor="#fff"></u-search>
        <u-button icon="reload" text="刷新"
                  style="width: 120rpx;height: 68rpx; border-radius: 68rpx; margin-left: 10rpx;"
                  @click="presa"></u-button>
      </view>
<!--      <view style="display: flex;margin: 30rpx -150rpx;">-->
<!--        <u-button type="primary" text="刷新" style="width: 200rpx;" @click="presa"></u-button>-->
<!--      </view>-->
      <!--      <view style="display: flex;margin: 30rpx -150rpx;">-->

      <!--        <u-button type="success" icon="plus" text="新增" style="width: 200rpx;"-->
      <!--                  @click="showDrawer1('showLeft')"></u-button>-->
      <!--      </view>-->
      <!-- <button @click="submitForm">Submit</button> -->

      <uni-drawer ref="showLeft" mode="left" :width="320">
        <view class="close">
          <button @click="closeDrawer('showLeft')">
            <text class="word-btn-white">关闭</text>
          </button>
          <view class="formlist">
            <u-form :model="fromAdd" :rules="rules" ref="uForm" label-width="80" labelAlign="left">
              <u-form-item prop="name" borderBottom ref="item1">
                <view class="lable">姓名</view>
                <u--input v-model="fromAdd.name" border="none" placeholder="请填写姓名"></u--input>
              </u-form-item>
              <u-form-item prop="model" borderBottom ref="item1">
                <view class="lable">金额</view>
                <u--input v-model="fromAdd.amount" border="none" placeholder="请填写金额"></u--input>
              </u-form-item>
              <u-form-item prop="number" borderBottom ref="item1">
                <view class="lable">是否支付</view>
                <u--input v-model="fromAdd.isPay" border="none" placeholder="请填写是否支付"></u--input>
              </u-form-item>
              <view class="uni-btn-v" @click="submit('ins')">确认新增</view>
            </u-form>
          </view>
        </view>
      </uni-drawer>
      <uni-drawer ref="showRight" mode="right" :width="320">
        <view class="close">
          <button @click="closeDrawer('showRight')">
            <text class="word-btn-white">关闭</text>
          </button>
          <view class="formlist">
            <u-form :model="fromupdate" :rules="rules" ref="uForm" label-width="80" labelAlign="left">
              <u-form-item prop="name" borderBottom ref="item1">
                <view class="lable">姓名</view>
                <u--input v-model="fromupdate.name" border="none" placeholder="请填写姓名"></u--input>
              </u-form-item>
              <u-form-item prop="amount" borderBottom ref="item1">
                <view class="lable">金额</view>
                <u--input v-model="fromupdate.amount" border="none" placeholder="请填写金额"></u--input>
              </u-form-item>
              <u-form-item prop="isPay" borderBottom ref="item1">
                <view class="lable">是否支付</view>
                <u--input v-model="fromupdate.isPay" border="none" placeholder="请填写是否支付"></u--input>
              </u-form-item>
              <!--            <view  v-if="showins" class="uni-btn-v" @click="submit('ins')">确认新增</view>-->
              <view class="uni-btn-v" @click="submit('upd')">确认修改</view>
            </u-form>
            <!--					</u-action-sheet>-->
          </view>
        </view>
      </uni-drawer>
      <view class="uni-container">
        <view class="list" v-for="(item,index) in tableData" :key="index">
          <view>
            <view class="l-i">
						<span class="spanli">
							<view class="li"></view>
							<view>姓名</view>
						</span>：<span style="font-weight: bold;">{{item.name}}</span>
            </view>
            <view class="l-i"><span class="spanli">
							<view class="li"></view>
							<view>金额</view>
						</span>：<span style="color:#F9363A;font-weight: bold;">{{item.amount}}</span>元</view>
            <view style="display: flex; justify-content: space-between;">
              <view class="l-i"><span class="spanli">
								<view class="li"></view>
								<view>创建日期</view>
							</span>：{{item.createTime}}</view>
            </view>
          </view>
          <view class="uni-group">
            <button class="uni-button" @click="deleteOne(item)" size="mini" type="warn">删除</button>
            <button class="uni-button" @click="infor(item)" size="mini" type="primary">详情</button>
          </view>
          <!--        <view class="uni-group" >-->
          <!--          <button class="uni-button" @click="showDrawer2(item,'showRight')" style="margin-left:59%;" size="mini" type="primary">修改</button><button class="uni-button" @click="deleteOne(item)" size="mini" type="warn">删除</button></view>-->
        </view>
      </view>
      <!--      <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">-->
      <!--        <uni-tr>-->
      <!--          &lt;!&ndash;          <uni-th width="150" align="center">类型</uni-th>&ndash;&gt;-->
      <!--          &lt;!&ndash;          <uni-th width="150" align="center">数量</uni-th>&ndash;&gt;-->
      <!--          <uni-th align="center">姓名</uni-th>-->
      <!--          <uni-th align="center">金额</uni-th>-->
      <!--          <uni-th align="center">是否支付</uni-th>-->
      <!--          <uni-th align="center">创建日期</uni-th>-->
      <!--          <uni-th width="204" align="center">设置</uni-th>-->
      <!--        </uni-tr>-->
      <!--        <uni-tr v-for="(item, index) in tableData" :key="index">-->
      <!--          &lt;!&ndash;          <uni-td align="center">{{ item.model }}</uni-td>&ndash;&gt;-->
      <!--          &lt;!&ndash;          <uni-td align="center">&ndash;&gt;-->
      <!--          &lt;!&ndash;            <view class="name">{{ item.number }}</view>&ndash;&gt;-->
      <!--          &lt;!&ndash;          </uni-td>&ndash;&gt;-->
      <!--          <uni-td align="center">{{ item.name }}</uni-td>-->
      <!--          <uni-td align="center">{{ item.amount }}</uni-td>-->
      <!--          <uni-td align="center">{{ item.isPay }}</uni-td>-->
      <!--          <uni-td align="center">{{ item.createTime }}</uni-td>-->
      <!--          <uni-td>-->
      <!--            <view class="uni-group">-->
      <!--              <button class="uni-button" @click="showDrawer2(item,'showRight')" size="mini" type="primary">修改</button>-->
      <!--              <button class="uni-button" @click="deleteOne(item)" size="mini" type="warn">删除</button>-->
      <!--            </view>-->
      <!--          </uni-td>-->
      <!--        </uni-tr>-->
      <!--      </uni-table>-->
      <view class="uni-pagination-box">
        <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
                        :total="total" @change="change"/>
      </view>
    </view>
  </view>
  <!--  </view>-->
</template>


<script>
import {
  Supplierqueryall,
  Supplierlikeall,
  Supplierupdate,
  Supplierdelete,
  Supplieradd
} from '@/common/api.js'

export default {
  data() {
    return {
      value: '',
      //抽屉
      showLeft: false,
      searchVal: '',
      fromData: {
        companyId: ''
      },
      from: {
        companyId: "",
        like: ""
      },
      itemlist: [],
      fromupdate: {},
      fromAdd: {
        name: "", //姓名
        amount: "", //金额
        isPay: "", //是否支付
      },
      tableData: '',
      // 每页数据量
      pageSize: 10,
      // 当前页
      pageCurrent: 1,
      // 数据总量
      total: 0,
      loading: false
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    changkeyword(e) {
      console.log(e);
    },
    presa() {
      this.getData()
    },
    deleteOne(item) {
      console.log('删除');
      console.log(item);
      this.itemlist[0] = item.id;
      let from = {}
      from.idList = this.itemlist;
      uni.showLoading({
        title: '加载中...',
      });
      Supplierdelete(from).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        this.getData()
      })
    },
    onQuery() {
      console.log(this.value);
      this.from.companyId = uni.getStorageSync('companyId');
      this.from.like = this.value;
      uni.showLoading({
        title: '加载中...',
      });
      Supplierlikeall(this.from).then((res) => {
        uni.hideLoading();
        console.log('---------------------');
        console.log(res);
        this.tableData = res.data
      })
    },
    submit(but) {
      if (but == 'ins') {
        this.fromAdd.companyId = uni.getStorageSync('companyId');
        uni.showLoading({
          title: '加载中...',
        });
        Supplieradd(this.fromAdd).then((res) => {
          uni.hideLoading();
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
          this.getData()
        })
      } else {
        uni.showLoading({
          title: '加载中...',
        });
        Supplierupdate(this.fromupdate).then((res) => {
          uni.hideLoading();
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
          this.getData()
        })
      }

    },
    infor(item) {
      console.log('详情');
      uni.navigateTo({
        url: '/pages/Functions/payinfor?orstate=1&traner=' + item.name
      })
    },
    confirm() {
    },
    // 打开窗口
    showDrawer1(e) {
      this.$refs[e].open()
    },
    showDrawer2(item, e) {
      this.fromupdate = item;
      this.$refs[e].open()

    },
    // 关闭窗口
    closeDrawer(e) {
      this.$refs[e].close()
    },
    // 抽屉状态发生变化触发
    // change(e, type) {
    //   console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
    //   this[type] = e
    // },
    // //输入搜索内容
    // change(e) {
    //   console.log('change', e);
    // },
    // 分页触发
    change(e) {
      this.$refs.table.clearSelection()
      this.selectedIndexs.length = 0
      this.getData(e.current)
    },
    // 搜索
    search() {
      this.getData(1, this.searchVal)
    },
    // 获取数据
    getData() {
      this.loading = true
      this.fromData.companyId = uni.getStorageSync('companyId');
      console.log(this.fromData);
      Supplierqueryall(this.fromData).then((res) => {
        console.log(res.data);
        this.loading = false;
        this.tableData = res.data
      })
    },

  },
  onNavigationBarButtonTap(e) {
    if (this.showLeft) {
      this.$refs.showLeft.close()
    } else {
      this.$refs.showLeft.open()
    }
  },
  // app端拦截返回事件 ，仅app端生效
  onBackPress() {
    if (this.showRight || this.showLeft) {
      this.$refs.showLeft.close()
      this.$refs.showRight.close()
      return true
    }
  }
}
</script>


<style>
/* #ifndef H5 */
/* page {
padding-top: 85px;
} */
/* #endif */
.uni-group {
  display: flex;
  align-items: center;
  margin: 0 0 0 160px;
}

.all1 {
  width: 750rpx;
  background-color: #F5F4F4;
  height: 100vh;
  overflow: auto;
}
.spanli {
  color: #046BFB;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.l-i {
  display: flex;
  margin-bottom: 10rpx;
}


.li {
  width: 15rpx;
  height: 15rpx;
  border: 4rpx solid #046BFB;
  border-radius: 50%;
  margin-right: 10rpx;
}

.uni-button {
  height: fit-content;
}

.input {
  padding: 30rpx;
}

.formlist {
  /* margin: 420rpx 30rpx 0 30rpx; */
  /* background-color: white; */
  padding: 30rpx;
  border-radius: 30rpx;
}

.lable {
  font-size: 30rpx;
  font-weight: bold;
}

.uni-btn-v {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #24d4b0;
  color: #fff;
  font-size: 35rpx;
  font-weight: bold;
  border-radius: 30rpx;
  text-align: center;
  margin-top: 30rpx;
}

.list {
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: white;
  margin-top: 9px;

}
</style>
